<nav>
  <button type="button" (click)="toggle()">Toggle Open/Close</button>
  <div>
    <button type="button" (click)="addListItem()">添加</button>
    <button type="button" (click)="removeListItem()">删除</button>
  </div>
</nav>

<!-- <div class="list">
  <div [@flyInOut] class="item" *ngFor="let item of data" :key="item.name">
    {{item.name}}
  </div>
</div>
<hr> -->
<div [@pageAnimations] class="list">
  <div [@flyInOut] class="hero" *ngFor="let item of data" :key="item.name">
    {{item.name}}
  </div>
</div>

<div>
  <input [@filterAnimation] type="number" class="number-value" name="" id="" [(ngModel)]="numberValue">
  <div [@filterAnimation]>{{numberValue}}</div>
</div>

<div [@openClose]="isOpen?'open':'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
  <div>这里有些其它内容</div>
</div>
